<template>
  <div id="cluereportedit">
    <el-dialog title="人员信息详情" :visible.sync="personDetailVisible" width="80%" top="20px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <personInfo :personId='personId' :hidemoredetail="true"></personInfo>
    </el-dialog>
    <el-form :model="editForm" label-width="140px" ref="editForm" :inline="true" style="padding:10px 0 0;clear:both">
      <el-form-item label="来源" prop="source" :rules="{ required: true, message: '请选择来源', trigger: 'blur' }">
        <el-select v-model="editForm.source" placeholder="请选择">
          <el-option v-for="(item, index) in sourceDic" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="其他来源" prop="otherSource" v-show="editForm.source==='0108'">
        <el-input v-model="editForm.otherSource" style="width:220px"></el-input>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="文号" prop="fileNumber" :rules="{ required: true, message: '请输入文号', trigger: 'blur' }">
        <el-input v-model="editForm.fileNumber" style="width:220px"></el-input>
      </el-form-item>
      <el-form-item label="登记时间" prop="registerDate" :rules="{ required: true, message: '请选择登记时间', trigger: 'blur' }">
        <el-date-picker
          v-model="editForm.registerDate"
          placeholder="请选择登记时间"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="来文标题" prop="title" :rules="{ required: true, message: '请输入来文标题', trigger: 'blur' }">
        <el-input v-model="editForm.title" style="width:965px"></el-input>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="反映问题分类" prop="caseClass" :rules="{ required: true, message: '请选择反映问题分类', trigger: 'blur' }">
        <el-select v-model="editForm.caseClass" placeholder="请选择">
          <el-option v-for="(item, index) in caseClassDic" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="六大纪律分类" prop="disciplineClass" :rules="{ required: true, message: '请选择六大纪律分类', trigger: 'blur' }">
        <el-cascader v-model="editForm.disciplineClass" :options="disciplineClassDic"></el-cascader>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="反映主要问题" prop="caseComment" :rules="{ required: true, message: '请输入反映主要问题', trigger: 'blur' }">
        <el-input type="textarea" v-model="editForm.caseComment" style="width:965px"></el-input>
      </el-form-item>
      <h1>涉及人员</h1>
      <el-form-item label="单位" prop="unit">
        <el-autocomplete style="width:400px" v-model="unit" :fetch-suggestions="querySearch" placeholder="请输入单位名称关键字" :trigger-on-focus="false" ></el-autocomplete>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-autocomplete style="width:250px" v-model="name" :fetch-suggestions="searchPerson" placeholder="请输入姓名" :trigger-on-focus="false" @select="handleSelect">
          <template slot-scope="{ item }">
            {{ item.value }}：{{ item.job }}({{ item.idno }})
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCardNo">
        <el-input v-model="idCardNo" style="width:220px"></el-input>
      </el-form-item>
      <el-form-item label="职务" prop="job">
        <el-input v-model="job" style="width:220px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="addperson">新增</el-button>
      </el-form-item>
      <div class="wboxd" style="margin-bottom:20px;overflow:hidden">
        <el-table :data="personlist" highlight-current-row v-loading="listLoading" style="width: 100%;" border>
          <el-table-column type="index" label="序号" width="50" fixed align="center" class-name="tableth">
          </el-table-column>
          <el-table-column prop="unit" label="单位">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100">
          </el-table-column>
          <el-table-column prop="idCardNo" label="身份证号" width="200">
          </el-table-column>
          <el-table-column prop="job" label="职务" width="300">
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button @click="detail(scope.row.idCardNo)" type="primary">查看全方位情况</el-button>
              <el-button type="danger" @click="delperson(scope.$index)" style="margin:10px;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="clear:both"></div>
      <el-form-item label="批办领导" prop="approveLeader">
        <el-input v-model="editForm.approveLeader" style="width:220px"></el-input>
      </el-form-item>
      <el-form-item label="批办时间" prop="approveDate">
        <el-date-picker
          v-model="editForm.approveDate"
          placeholder="请选择登记时间"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="处置方式" prop="approveMethod" >
        <el-input v-model="editForm.approveMethod" style="width:220px"></el-input>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="查核结论" prop="verifyComment">
        <el-input type="textarea" v-model="editForm.verifyComment" style="width:965px"></el-input>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="性质" prop="nature">
        <el-select v-model="editForm.nature" placeholder="请选择">
          <el-option v-for="(item, index) in natureDic" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="处理方式" prop="processMethod">
        <el-select v-model="editForm.processMethod" placeholder="请选择">
          <el-option v-for="(item, index) in processMethodDic" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="其他处理方式" prop="otherProcessMethod" v-show="editForm.processMethod==='0508'">
        <el-input v-model="editForm.otherProcessMethod" style="width:220px"></el-input>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="处理决定机关" prop="processOffice">
        <el-select v-model="editForm.processOffice" placeholder="请选择">
          <el-option v-for="(item, index) in processOfficeDic" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="其他处理决定机关" prop="otherProcessOffice" v-show="editForm.processOffice==='0606'">
        <el-input v-model="editForm.otherProcessOffice" style="width:220px"></el-input>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="处理情况" prop="processComment">
        <el-input type="textarea" v-model="editForm.processComment" style="width:965px"></el-input>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="办结批准领导" prop="closingLeader">
        <el-input v-model="editForm.closingLeader" style="width:220px"></el-input>
      </el-form-item>
      <el-form-item label="办结时间" prop="closingDate">
        <el-date-picker
          v-model="editForm.closingDate"
          placeholder="请选择办结时间"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="当前状态" prop="status">
        <el-select v-model="editForm.status" placeholder="请选择">
          <el-option v-for="(item, index) in statusDic" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="comment">
        <el-input type="textarea" v-model="editForm.comment" style="width:965px"></el-input>
      </el-form-item>
    </el-form>
    <div style="margin:0 140px">
      <el-button type="primary" @click.native="editFormSubmit" :loading="saveloading">保存</el-button>
    </div>
  </div>
</template>

<script>
import personInfo from '@/person/Detail.vue'
export default {
  components: {
    personInfo
  },
  watch: {
    data: {
      handler (val) {
        console.log('data:' + val)
        this.getPersonList(val.id)
        this.editForm = val
      },
      immediate: true
    }
  },
  props: {
    data: {}
  },
  data () {
    return {
      editForm: {
        id: '',
        source: '',
        otherSource: '',
        fileNumber: '',
        registerDate: '',
        title: '',
        caseClass: '',
        disciplineClass: '',
        caseComment: '',
        approveLeader: '',
        approveDate: '',
        approveMethod: '',
        verifyComment: '',
        nature: '',
        processMethod: '',
        otherProcessMethod: '',
        processOffice: '',
        otherProcessOffice: '',
        processComment: '',
        closingLeader: '',
        closingDate: '',
        status: '',
        comment: ''
      },
      sourceDic: [],
      natureDic: [],
      caseClassDic: [],
      disciplineClassDic: [],
      statusDic: [],
      processMethodDic: [],
      approveMethodDic: [],
      processOfficeDic: [],
      personlist: [],
      listLoading: false,
      unit: '',
      name: '',
      idCardNo: '',
      job: '',
      otherSourceShow: false,
      otherProcessMethodShow: false,
      otherProcessOfficeShow: false,
      editDataFormLoading: false,
      saveloading: false,
      personDetailVisible: false,
      personId: ''
    }
  },
  methods: {
    persondetail (id) {
      this.personDetailVisible = true
      this.personId = id
    },
    detail (idcardNo) {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/jiben/getIdByIdCardNo?idcard=` + idcardNo)
        .then(response => {
          if (response.data.success) {
            if (response.data.result) {
              this.persondetail(response.data.result)
            } else {
              this.$message({
                message: '无此人选的干部全方位情况',
                type: 'error'
              })
            }
          } else {
            this.$message({
              message: '查询失败:无此人选的干部全方位情况',
              type: 'error'
            })
          }
        })
        .catch(function () {
          this.$message({
            message: '查询失败:无此人选的干部全方位情况',
            type: 'error'
          })
        })
    },
    delperson (index) {
      console.log('index:' + index)
      this.personlist.splice(index, 1)
    },
    addperson () {
      if (!this.unit || this.unit === '') {
        this.$message({
          message: '请填写涉及人员单位',
          type: 'error'
        })
        return
      }
      if (!this.name || this.name === '') {
        this.$message({
          message: '请填写人员姓名',
          type: 'error'
        })
        return
      }
      if (!this.idCardNo || this.idCardNo === '') {
        this.$message({
          message: '请填写身份证号',
          type: 'error'
        })
        return
      }
      if (!this.job || this.job === '') {
        this.$message({
          message: '请填写职务',
          type: 'error'
        })
        return
      }
      this.personlist.push({unit: this.unit, name: this.name, job: this.job, idCardNo: this.idCardNo})
      // this.unit = ''
      this.name = ''
      this.job = ''
      this.idCardNo = ''
    },
    handleSelect (item) {
      this.idCardNo = item.idno
      this.job = item.job
    },
    querySearch (queryString, cb) {
      return this.getunits(this, queryString, cb)
    },
    getunits (self, queryString, cb) {
      let para = {
        unitname: queryString
      }
      self.$http
        .post(`/api/prj/searchunit/`, para)
        .then(function (response) {
          console.log('获取成功')
          var results = response.data
          let newArr = []
          results.forEach(function (item) {
            let obj = {'value': item}
            newArr.push(obj)
          })
          cb(newArr)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    searchPerson (queryString, cb) {
      return this.getpersons(this, queryString, cb, this.unit)
    },
    getpersons (self, queryString, cb, unitname) {
      let para = {
        realname: queryString,
        unitname: unitname
      }
      console.log(para)
      self.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/jiben`, {params: para})
        .then(function (response) {
          console.log('获取成功')
          var results = response.data.result
          let newArr = []
          results.forEach(function (item) {
            let obj = {'value': item.a0101, 'idno': item.a0184, 'job': item.a0201a + ' ' + item.a0215a}
            newArr.push(obj)
          })
          cb(newArr)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getDics (code) {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/sysDict/getByCode?code=` + code)
        .then(response => {
          if (response.data.success) {
            switch (code) {
              case '01':
                this.sourceDic = response.data.result
                break
              case '02':
                this.caseClassDic = response.data.result
                break
              case '03':
                this.disciplineClassDic = response.data.result
                break
              case '04':
                this.natureDic = response.data.result
                break
              case '05':
                this.processMethodDic = response.data.result
                break
              case '06':
                this.processOfficeDic = response.data.result
                break
              case '07':
                this.statusDic = response.data.result
                break
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    getAllDics () {
      this.getDics('01')
      this.getDics('02')
      this.getDics('03')
      this.getDics('04')
      this.getDics('05')
      this.getDics('06')
      this.getDics('07')
    },
    editFormReset () {
      this.editForm = {
        source: '',
        otherSource: '',
        fileNumber: '',
        registerDate: '',
        title: '',
        caseClass: '',
        disciplineClass: '',
        caseComment: '',
        approveLeader: '',
        approveDate: '',
        approveMethod: '',
        verifyComment: '',
        nature: '',
        processMethod: '',
        otherProcessMethod: '',
        processOffice: '',
        otherProcessOffice: '',
        processComment: '',
        closingLeader: '',
        closingDate: '',
        status: '',
        comment: ''
      }
      this.personlist = []
      this.unit = ''
      this.name = ''
      this.job = ''
      this.idCardNo = ''
    },
    editFormSubmit () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          let para = {
            source: this.editForm.source,
            otherSource: this.editForm.otherSource,
            fileNumber: this.editForm.fileNumber,
            registerDate: this.editForm.registerDate,
            title: this.editForm.title,
            caseClass: this.editForm.caseClass,
            disciplineClass: this.editForm.disciplineClass[this.editForm.disciplineClass.length - 1],
            caseComment: this.editForm.caseComment,
            approveLeader: this.editForm.approveLeader,
            approveDate: this.editForm.approveDate,
            approveMethod: this.editForm.approveMethod,
            verifyComment: this.editForm.verifyComment,
            nature: this.editForm.nature,
            processMethod: this.editForm.processMethod,
            otherProcessMethod: this.editForm.otherProcessMethod,
            processOffice: this.editForm.processOffice,
            otherProcessOffice: this.editForm.otherProcessOffice,
            processComment: this.editForm.processComment,
            closingLeader: this.editForm.closingLeader,
            closingDate: this.editForm.closingDate,
            status: this.editForm.status,
            comment: this.editForm.comment,
            persons: this.personlist
          }
          this.saveloading = true
          this.$http
            .post(this.$http.defaults.selectionAPI + `api/busClueReport/saveReport`, para)
            .then(response => {
              this.saveloading = false
              if (response.data.success) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.editFormReset()
                this.$emit('dialogHide')
              } else {
                this.$message({
                  message: '保存失败:' + response.data.message,
                  type: 'error'
                })
              }
            })
            .catch(error => {
              this.saveloading = false
              console.log(error)
              this.$message({
                message: '网络保存失败:' + error,
                type: 'error'
              })
            })
        }
      })
    },
    setdata (data) {
      this.preferments.forEach((item, index) => {
        this.preferments[index].inname = ''
        this.preferments[index].inchusheng = ''
        this.preferments[index].inyuanzhiwu = ''
        this.preferments[index].inxianzhiwu = ''
        this.preferments[index].inrenzhishijian = ''
      })
      this.preferments.forEach((item, index) => {
        if (data.length >= index + 1) {
          this.preferments[index].inname = data[index].Name
          this.preferments[index].inchusheng = data[index].Chusheng
          this.preferments[index].inyuanzhiwu = data[index].Yuanzhiwu
          this.preferments[index].inxianzhiwu = data[index].Xianzhiwu
          this.preferments[index].inrenzhishijian = data[index].Shijian
        }
      })
    },
    // 获取列表
    getImportList (res) {
      if (res.success) {
        this.$message({
          message: '导入成功！',
          type: 'success'
        })
        this.setdata(res.content)
      } else {
        console.log(res.Msg)
        this.$message({
          message: '导入失败:' + res.message,
          type: 'error'
        })
      }
      this.fileList = []
    },
    exportticket () {
      window.open(this.$http.defaults.baseURL + 'api/prj/wordfile/' + this.myid)
    },
    str2zhiwu (str) {
      if (str === '正职') {
        str = '正职（主要）领导'
      }
      if (str === '副职') {
        str = '副职领导'
      }
      return str
    },
    initdata () {
      let myflag = false
      for (let index in this.leaders) {
        if (this.leaders[index].inidnumber !== '' || this.leaders[index].inname !== '' || this.leaders[index].inzhiwu !== '') {
          myflag = true
          break
        }
      }
      if (myflag) {
        this.$confirm('确定要覆盖当前填写的班子成员数据吗', '提示', {
          type: 'success'
        }).then(() => {
          this.setperson()
        })
      } else {
        this.setperson()
      }
    },
    setperson () {
      this.leaders.forEach((item, index) => {
        this.leaders[index].inidnumber = ''
        this.leaders[index].inname = ''
        this.leaders[index].inzhiwu = ''
      })
      let para = {
        unitname: this.editUnitForm.unitname
      }
      let _this = this
      this.$http
        .post(`/api/prj/initdata/`, para)
        .then(function (response) {
          console.log('获取成功')
          var results = response.data
          console.log('results.length:' + results.length)
          if (results === null || results !== []) {
            _this.leaders.forEach((item, index) => {
              if (results.length >= index + 1) {
                _this.leaders[index].inidnumber = results[index].A0184
                _this.leaders[index].inname = results[index].A0101
                _this.leaders[index].inzhiwu = results[index].A0215A
              }
            })
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    beforeAvatarUpload (file) {
      console.log('文件类型')
      console.log(file.name)
      const isXLS = file.name.indexOf('.xls') > 0
      const isXLSX = file.name.indexOf('.xlsx') > 0
      // const isLt5M = file.size / 1024 / 1024 < 500
      if (!isXLS && !isXLSX) {
        this.$message.error('上传文件只能是 xls/xlsx 格式!')
      }
      // if (!isLt5M) {
      //   this.$message.error('上传文件大小不能超过 500MB!')
      // }
      // return isZIP && isLt5M
      return isXLS || isXLSX
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，如有多个文件请压缩为zip文件打包上传。`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleCurrentChange (val) {
      this.pageNum = val
      this.getImportList()
    },
    importPersons () {
      this.getImportList()
    },
    uploaderror (err) {
      console.log('具体错误')
      console.log(err)
      this.$message({
        message: '导入失败，可能是文件大小超出系统限制:' + err,
        type: 'error'
      })
    },
    datadownload (id) {
      window.open(this.$http.defaults.baseURL + 'admin/binfo/download')
    },
    getPersonList (id) {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/busClueReport/queryPersonsByReport?clueReportId=` + id)
        .then(response => {
          if (response.data.success) {
            this.personlist = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    editDataFormSubmit () {
      let newArr = []
      let _this = this
      checkform('editUnitForm')
      this.leaders.forEach((item, index) => {
        checkform2('editLeader1Form' + index)
      })
      this.preferments.forEach((item, index) => {
        checkform2('editLeader2Form' + index)
      })
      if (checkAll()) {
        this.editSubmit()
      }
      function checkform (arr) {
        console.log(arr)
        _this.$refs[arr].validate((valid) => {
          if (valid) {
            newArr.push(true)
          } else {
            newArr.push(false)
          }
        })
        return true
      }
      function checkform2 (arr) {
        // console.log(arr)
        _this.$refs[arr][0].validate((valid) => {
          if (valid) {
            newArr.push(true)
          } else {
            newArr.push(false)
          }
        })
        return true
      }
      function checkAll () {
        console.log(newArr)
        for (let item in newArr) {
          if (!newArr[item]) {
            return false
          }
        }
        return true
      }
    },
    editSubmit () {
      let leadersinname = []
      let leadersidnumber = []
      let leaderszhiwu = []
      let prefermentsinname = []
      let prefermentsinchusheng = []
      let prefermentsidnumber = []
      let prefermentsxianzhiwu = []
      let prefermentsyuanzhiwu = []
      let prefermentsrenzhishijian = []
      this.leaders.forEach((item, index) => {
        leadersinname.push(item.inname)
        leadersidnumber.push(item.inidnumber)
        leaderszhiwu.push(item.inzhiwu)
      })
      this.preferments.forEach((item, index) => {
        prefermentsinname.push(item.inname)
        prefermentsinchusheng.push(item.inchusheng)
        prefermentsidnumber.push(item.inidnumber)
        prefermentsyuanzhiwu.push(item.inyuanzhiwu)
        prefermentsxianzhiwu.push(item.inxianzhiwu)
        if (item.inrenzhishijian) {
          prefermentsrenzhishijian.push(item.inrenzhishijian)
        } else {
          prefermentsrenzhishijian.push('')
        }
      })
      let para = {
        id: this.myid,
        inname: this.editUnitForm.unitname,
        leadersinname: leadersinname,
        leadersinidnumber: leadersidnumber,
        leadersinzhiwu: leaderszhiwu,
        prefermentsinname: prefermentsinname,
        prefermentsinchusheng: prefermentsinchusheng,
        prefermentsinidnumber: prefermentsidnumber,
        prefermentsinyuanzhiwu: prefermentsyuanzhiwu,
        prefermentsinxianzhiwu: prefermentsxianzhiwu,
        prefermentsinrenzhishijian: prefermentsrenzhishijian,
        inmanagleader: this.editUnitForm.inmanagleader
      }
      let _this = this
      this.saveloading = true
      this.$http
        .post(`/api/prj/edit/`, para)
        .then(function (response) {
          if (response.data.success === true) {
            _this.$message({
              message: '保存成功',
              type: 'success'
            })
            _this.$router.push('/assess/')
          } else {
            _this.$message({
              message: response.data.message,
              type: 'error'
            })
          }
          _this.saveloading = false
        })
        .catch(function (error) {
          _this.$message({
            message: '保存失败:' + error,
            type: 'error'
          })
          _this.saveloading = false
        })
    }
  },
  mounted () {
    this.getAllDics()
  }
}
</script>
<style>
  #cluereportedit h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0 0 20px;
  }
  #cluereportedit .el-table{
    border: #95B8E7 solid 1px;
  }
</style>
